<template>
<div class="down" >
  
  <!-- <div > -->

      <van-icon name="http://rul4y8e5f.hn-bkt.clouddn.com/%E6%92%AD%E6%94%BE%E5%99%A8.png" size="3rem"  @click="showshow()"></van-icon>
  <div  v-show="showPlay" display="inline-block">
    <!-- <div > -->
      
    <!-- loop循环播放 -->
    <audio controls autoplay :loop="ifloop" ref="audio" @ended="nextPlay">
      <source :src="this.musicUrl" type="audio/mpe"/>
      <source :src="this.musicUrl" type="audio/ogg; codecs=opus"/>
      <source :src="this.musicUrl" type="audio/ogg; codecs=vorbis"/>
    </audio>
<!-- <button @click="testbtn">testtt</button> -->

<!-- <a v-if="ifloop">{{musicUrl}}</a> -->


    <div class="list">
      <!-- 弹出播放列表 -->
      <div class="left" >
        <!-- 图片需要放到云服务器上 -->
        <!-- 播放上一首 -->
        <van-button  @click="forwardPlay" icon="http://rul4y8e5f.hn-bkt.clouddn.com/play-previous.png" round size="small" >      
        </van-button>
         <!-- <h7> 下一首</h7> -->
        <van-button  @click="nextPlay" icon="http://rul4y8e5f.hn-bkt.clouddn.com/play-next.png" round size="small" >    
        </van-button>  
        <van-button @click="loopPlay"  icon="http://rul4y8e5f.hn-bkt.clouddn.com/repeat.png" round size="small" ></van-button>
      </div>
      <div class="right">
        <!-- <van-cell is-link @click="showPopup">播放列表</van-cell> -->
        <van-button  icon="http://rul4y8e5f.hn-bkt.clouddn.com/playlist1.png" @click="showPopup" size="small"  round  >播放列表</van-button>
      <!-- 右侧弹出 -->
      <van-popup v-model="show" round closeable lock-scroll=false  position="bottom" :style="{ height: '50%' } " >
      <!-- 播放列表 -->
     <MusicPlayList></MusicPlayList>

      </van-popup>
      </div>
    </div>
  </div>
 
  <!-- <BottomIndex></BottomIndex> -->

</div>
</template>

<script>
import MusicPlayList from '@/views/Music/MusicPlayList.vue';
import PlayListAPI from '@/api/PlayListAPI';
import BottomIndex from '@/views/Music/BottomIndex.vue'


export default {
  name: 'MusicPlay',
  components:{
    BottomIndex,
  },

  data() {
    return {
      musicUrl: '',
      // 是否循环播放
      ifloop: false,
      musicList:[],
      show: false,
      currentPlayIndex: -1,
      showPlay:false

    }
  },
created(){
  // this.testbtn()
  this.getMusicPlayList()
  // this.musicUrl=this.musicList[0].musicUrl
  // console.log("6666"+this.musicUrl)
  // this.$toast(this.musicUrl)
  // this.$refs.audio.src= this.musicUrl
  // this.$refs.audio.play()
},


  components:{
    MusicPlayList,
  },

  mounted() {
    //给$bus绑定playUrl事件
    this.$bus.$on("playUrl", (data) => {
      if(!this.$refs.audio.ended){
        this.$refs.audio.pause() // 暂停当前音频文件播放
        setTimeout(()=>{
          this.musicUrl=data
          this.$refs.audio.src=this.musicUrl
          this.$refs.audio.load(); // 缓存加载
          this.$refs.audio.play(); // 播放新的音频文件
        },500) // 等待500毫秒
      }else{
        this.musicUrl = data;
        this.$refs.audio.src = this.musicUrl;
        this.$refs.audio.load(); // 缓存加载
        this.$refs.audio.play(); // 播放新的音频文件
      }

      // this.musicUrl=data
      // this.$refs.audio.src=this.musicUrl
      // this.$refs.audio.play()

    }),
    this.$bus.$on("myMusicList",(data) =>{
     this.musicList = data
    }),
    this.$bus.$on("playIndex",(data) =>{
     this.currentPlayIndex = data
    }),

    // 检测是否刷新播放队列
    this.$bus.$on("refreshList",(refresh) =>{
     if(refresh == true){
      this.getMusicPlayList();
     }
    })
  },
  beforeDestroy() {
    this.$bus.$off("playUrl");
},

  methods: {
    showPopup() {
      this.show = true;
    },

    // 循环播放
    loopPlay(){
      if(this.ifloop == true){
        this.ifloop=false
        this.$toast("取消循环播放")
      }else{
        this.ifloop=true
        this.$toast("循环播放")
      }
    
    },

    // 上一首播放
       forwardPlay(){
      this.currentPlayIndex--;
      // 判断当前播放下标是否<=-1，<=-1的话就要从后面开始开始
      if(this.currentPlayIndex < -1 ){
        this.currentPlayIndex = this.musicList.length;
      }
      this.$refs.audio.src = this.musicList[this.currentPlayIndex].musicUrl
      console.log(this.musicList[this.currentPlayIndex].musicUrl)
      this.$refs.audio.play(this.musicList[this.currentPlayIndex].musicUrl)
    },
    // 下一首播放
    nextPlay(){
      this.currentPlayIndex++;
      // 判断当前播放下标是否大于当前播放列表，大于的话就要重新开始
      if(this.currentPlayIndex >= this.musicList.length){
        this.currentPlayIndex = -1;
      }
      this.$refs.audio.src = this.musicList[this.currentPlayIndex].musicUrl
      console.log(this.musicList[this.currentPlayIndex].musicUrl)
      this.$refs.audio.play(this.musicList[this.currentPlayIndex].musicUrl)
    },

     // 创建时获取播放列表
     getMusicPlayList(){
      var result = PlayListAPI.GetPlayList()
      // 获取返回结果
      result.then((val)=>{
  
        if(val.success){
          console.log("查询成功！！！")
      // 将数据存到list里面
      this.musicList=val.data
          console.log(this.musicList)
        

        }else{
          console.log(val.errorMsg)
          this.$toast(val.errorMsg)
        }
            })
    },
    showshow(){
      if(this.showPlay == false){
        this.showPlay=true
      }else{
        this.showPlay=false
      }
    },
    // testbtn(){
    //   // this.musicUrl='http://rmzjsjx0b.hn-bkt.clouddn.com/1a940f51-3ddf-4427-bb6f-afccfc0976afy.mp3'
    //   this.$refs.audio.src='http://rmzjsjx0b.hn-bkt.clouddn.com/1a940f51-3ddf-4427-bb6f-afccfc0976afy.mp3'//（动态设置的src地址）
    //   this.ifloop=true
    //   this.$toast('666')
    // },
  },
}
</script>

<style lang="less">
// .down{
//   position: absolute;
//   // 底部位置
//   bottom:50px;

//   // 指定顶层 越大越顶
//   z-index: 10;

// }
</style>